import React from 'react';
import { Link } from 'react-router';
// import Carousel from 'antd/lib/carousel';
var Carousel = require('nuka-carousel');

import { URL_IMG } from '../config.jsx';

const styles = {
    channelImg: {
        height:"5rem",
        marginTop: "0.5rem",
        marginBottom: "0.5rem",
        width: "9rem",
        backgroundSize: "100% 100%",
        backgroundRepeat: "no-repeat"
    }
}

export default class Danners extends React.Component {

    render() {
        if (this.props.banners === undefined || this.props.banners.length <= 0) {
            return <div>Loading......</div>
        } else {
            var banners = [];
            var _this = this;

            let bashImg = URL_IMG.replace('/phenanthrene','');

            this.props.banners.map(function (channel) {
                var bannerImage = "url(" + bashImg + channel.ChannelImageUrl + ")";
                banners.push(
                    <div onClick={() => {_this.props.handleSwitchChannel(channel.ID)}} key={ channel.ID } style={{ ...styles.channelImg, backgroundImage: bannerImage }}>
                        
                    </div>
                )
            });
            let width = 0;
            let space = 20;
            if(document.body.clientWidth < 360) {
                space = 28;
                width = 9 * 14;
            } else if(document.body.clientWidth >= 360 && document.body.clientWidth < 414) {
                space = 10;
                width = 9 * 16;
            } else if(document.body.clientWidth >= 414 && document.body.clientWidth < 720) {
                space = 0;
                width = 9 * 17;
            } else {
                space = 0;
                width = 9 * 17;
            }
            var settings = {
                dots: false,
                autoplay: false,
                infinite: true,
                wrapAround: false,
                slideWidth: width + "px",
                decorators: [],
                cellSpacing: space
            };

            return (
                <div id="banners" style={{margin:"0rem 0.5rem",overflow:"hidden",height: "6rem",borderBottom:"solid 1px #eee",borderTop:"solid 1px #eee"}}>
                    <Carousel {...settings}>
                        {banners}
                    </Carousel>
                </div>
            );
        }
    }
}